/**
 * FigmaMCPWorkflow 组件模板
 * 用于Phase 2降级时的基础模板
 */

import React, { useMemo, useEffect, useCallback } from 'react';
import cl from 'classnames';
import { HexToRGB } from '@utils/utils';
import { getDataSourceValue } from '@utils/dataMart';
import styles from './index.less';

/**
 * Props接口定义
 * 注意：visible必须是boolean，其他布尔值使用'Y'/'N'
 */
interface ${ComponentName}Props {
  // 必需的可见性控制
  visible?: boolean;

  // 基础属性
  title?: string;
  subTitle?: string;
  description?: string;

  // 显示控制（Y/N格式）
  showTitle?: string;
  showLegend?: string;
  autoRefresh?: string;

  // 颜色属性（需要配对opacity）
  backgroundColor?: string;
  backgroundColorOpacity?: number;
  titleColor?: string;
  titleColorOpacity?: number;

  // 数据属性
  data?: any[];
  dataSourceId?: string;

  // 样式属性
  width?: number | string;
  height?: number | string;
  padding?: string;
  margin?: string;

  // 图片属性（数组格式）
  backgroundImage?: string[];
  logo?: string[];

  // 其他自定义属性
  ${/* 根据实际需要添加 */}
}

/**
 * 组件实现
 * 核心要求：
 * 1. 组件签名：必须使用 React.FC<Props> 或函数声明，直接从 props 解构
 *    禁止使用 React.FC<{ value: Props }> = ({ value }) => {...} 的错误结构
 *    原因：Page Builder 渲染系统传递的是展开的 props，而非包装在 value 对象中
 * 2. visible通过className控制
 * 3. 颜色使用HexToRGB处理
 * 4. 支持编辑态/预览态
 */
const ${ComponentName}: React.FC<${ComponentName}Props> = (props) => {
  // Props解构（明确列出所有属性）
  // 重要：直接从 props 解构，不要使用 const { value } = props; const { ... } = value; 的错误方式
  const {
    visible = true,
    title = '',
    subTitle = '',
    description = '',
    showTitle = 'Y',
    showLegend = 'Y',
    autoRefresh = 'N',
    backgroundColor = '#FFFFFF',
    backgroundColorOpacity = 1,
    titleColor = '#333333',
    titleColorOpacity = 1,
    data = [],
    dataSourceId = '',
    width = '100%',
    height = 'auto',
    padding = '16px',
    margin = '0',
    backgroundImage = [],
    logo = []
  } = props;

  // 编辑态/预览态检测
  const currState = localStorage.getItem('currState');
  const isEditMode = currState === 'edit';

  // 数据源处理
  const dataSource = useMemo(() => {
    if (dataSourceId) {
      return getDataSourceValue(dataSourceId) || data;
    }
    return data;
  }, [dataSourceId, data]);

  // 样式计算
  const rootStyles = useMemo(() => ({
    backgroundColor: HexToRGB(backgroundColor, backgroundColorOpacity),
    width,
    height,
    padding,
    margin,
    backgroundImage: backgroundImage?.[0] ? `url(${backgroundImage[0]})` : undefined
  }), [backgroundColor, backgroundColorOpacity, width, height, padding, margin, backgroundImage]);

  const titleStyles = useMemo(() => ({
    color: HexToRGB(titleColor, titleColorOpacity),
    display: showTitle === 'Y' ? 'block' : 'none'
  }), [titleColor, titleColorOpacity, showTitle]);

  // 自动刷新逻辑（如需要）
  useEffect(() => {
    if (autoRefresh === 'Y' && !isEditMode) {
      const interval = setInterval(() => {
        // 刷新逻辑
        console.log('Auto refresh triggered');
      }, 30000); // 30秒

      return () => clearInterval(interval);
    }
  }, [autoRefresh, isEditMode]);

  // 事件处理
  const handleClick = useCallback(() => {
    if (!isEditMode) {
      // 交互逻辑
      console.log('Component clicked');
    }
  }, [isEditMode]);

  // 渲染逻辑
  return (
    <div
      className={cl(styles.root, {
        [styles.hidden]: !visible,
        [styles.editMode]: isEditMode
      })}
      style={rootStyles}
      onClick={handleClick}
    >
      {/* 标题区域 */}
      {showTitle === 'Y' && (
        <div className={styles.header}>
          <h3 className={styles.title} style={titleStyles}>
            {title}
          </h3>
          {subTitle && (
            <p className={styles.subTitle}>{subTitle}</p>
          )}
        </div>
      )}

      {/* 内容区域 */}
      <div className={styles.content}>
        {description && (
          <div className={styles.description}>
            {description}
          </div>
        )}

        {/* 主要内容渲染 */}
        <div className={styles.mainContent}>
          {/* 根据组件类型渲染具体内容 */}
          {renderMainContent(dataSource, { showLegend })}
        </div>
      </div>

      {/* Logo展示（如有） */}
      {logo?.[0] && (
        <img
          className={styles.logo}
          src={logo[0]}
          alt="logo"
        />
      )}
    </div>
  );
};

/**
 * 主内容渲染函数
 * 根据组件类型实现具体渲染逻辑
 */
function renderMainContent(data: any[], options: any) {
  // 这里根据具体组件类型实现
  // 例如：图表、表格、列表等
  return (
    <div className={styles.placeholder}>
      {/* 组件具体内容 */}
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

// 导出组件
export default ${ComponentName};
